<template>
  <el-card style="margin-bottom:20px;">
    <div slot="header" class="clearfix">
      <span>个人信息</span>
    </div>

    <div class="user-profile" style="display: flex; align-items: center;">
      <div class="box-center">
        <el-form style="text-align: center; margin: 0 auto;" :model="member" label-width="60px" class="register-form">
          <el-form-item prop="avatar">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8000/member/upload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarUpload" >
              <el-avatar style="margin-left: -20px" :src="avatar" :size="80"></el-avatar>
            </el-upload>
          </el-form-item>
          <el-form-item label="用户名" prop="memberName">
            <el-input v-model="member.memberName" class="custom-input"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input v-model="member.account" class="custom-input"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="member.password" type="password" class="custom-input"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update">修 改</el-button>
            <el-button type="primary" @click="back">返 回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </el-card>
</template>

<script>
import {getToken} from '@/utils/auth'
import {detail, update} from '@/api/user'

export default {

  data() {
    return {
      member: {},
      avatar: '',
    }
  },
  created() {
    this.getLogin()
  },
  methods: {
    back(){
      this.$router.push('/');
    },
    update(){
      update(this.member).then(res => {
        if(this.member.account === 'admin' || this.member.memberName === 'admin'){
          this.$message.error("管理员用户不可更改用户名和账号")
          return;
        }
        if(res.code === 200){
          this.$message.success("修改成功")
          this.getLogin()
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPGorPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }

      return isJPGorPNG && isLt5M;
    },
    handleAvatarUpload(response) {
      // 处理上传成功后的回调逻辑
      if (response.code === 200) {
        this.avatar = "http://localhost:8000/member/avatar/"  + response.data; // 在响应中获取上传成功后的头像地址
        this.member.avatar = response.data
      }
    },
    getLogin: function () {
      const token = getToken()
      detail(token).then(res => {
        this.member = res.data;
        this.avatar = "http://localhost:8000/member/avatar/" + this.member.avatar
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
